<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>商品简介编辑页面</title>
    <link rel="stylesheet" rev="stylesheet" href="${path}/backstage/css/style.css" type="text/css" media="all"/>
    <style>
        .success {
            color: green;
        }

        .error {
            color: red;
        }

        td {
            width: 17%;
        }
    </style>
</head>

<body class="ContentBody">
<form:form modelAttribute="intro" action="${path}/backstage/intro/edit" method="post" name="fom" id="fom"
           target="sypost">
    <div class="MainDiv">
        <table width="99%" border="0" cellpadding="0" cellspacing="0" class="CContent">
            <tr>
                <th class="tablestyle_title">商品简介编辑页面</th>
            </tr>
            <tr>
                <td class="CPanel">

                    <table border="0" cellpadding="0" cellspacing="0" style="width:100%">
                        <TR>
                            <TD width="100%">
                                <fieldset style="height:100%;">
                                    <legend>添加商品简介</legend>
                                    <table border="0" cellpadding="2" cellspacing="1" style="width:100%;">
                                        <!--隐藏域：放入pid和introId-->
                                        <input type="hidden" name="product.pid" id="product.pid"
                                               value="${intro.product.pid}"/>
                                        <input type="hidden" name="introId" id="introId" value="${intro.introId}"/>
                                        <tr>
                                            <td nowrap align="right">简介名称</td>
                                            <td><input type="text" class="text" name="key" id="key"
                                                       value="${intro.key}"/></td>
                                            <td>
                                                <span id="keyError"><form:errors cssClass="error"
                                                                                 path="key"/></span>
                                            </td>
                                            <td nowrap align="right">简介内容</td>
                                            <td><input type="text" class="text" name="value" id="introValue"
                                                       value="${intro.value}"/></td>
                                            <td>
                                                <span id="valueError"><form:errors cssClass="error"
                                                                                   path="value"/></span>
                                            </td>
                                        </tr>
                                    </table>
                                    <br/>
                                </fieldset>
                            </TD>
                        </TR>

                    </TABLE>


                </td>
            </tr>


            <TR>
                <TD colspan="2" align="center" height="50px">
                    <input type="button" id="save" name="save" value="保存" class="button"/>
                    <input type="button" name="Submit2" value="返回" class="button" onclick="window.history.go(-1);"/>
                </TD>
            </TR>
        </TABLE>


        </td>
        </tr>


        </table>

    </div>
</form:form>


<script src="${path}/js/jquery.min.js"></script>
<script>
    $(function () {
        // 获取需要验证的文本框.
        // 获取简介内容输入框
        var introValue = $("#introValue");
        var key = $("#key");
        var flag = false;
        // 定义一个布尔类型的变量，用来标记商品编号是否都符合条件
        // 定义一个布尔类型的变量，用来标记商品简介内容是否符合条件
        var flag1 = false;
        //把名称输入框的onblur事件与按钮的单击事件分开写
        $("#save").click(function addValidate() {
                flag = true;
                introValue.blur();
                // 验证key格式
                // 初始化flag1
                flag1 = false;
                // 获取span标签
                var span = $("#keyError");
                // 获取文本输入框中的值
                var value = $("#key").val();
                // 创建正则表达式对象
                var reg = /^[\s\S]{1,100}$/;
                if (!reg.test(value)) {
                    span.html("*不能为空，长度100");
                    span.addClass("error");
                    span.show();
                    //结束方法
                    return;
                }
                    /*
                     get方式数据全部拼接在url后面,不安全;拼接数据有容量限制;传输中文会有乱码
                     为了避免以上问题,使用post方式
                     */
                //jQuery事件的方法一定要写在页面加载结束的方法中
                $.post("${path}/backstage/intro/checkKey",
                    {"key": value,"exclude":'${intro.key}'}, function (result) {
                        //判断响应结果
                        if (result == "true") {
                            flag1 = true;
                            span.removeClass("error");
                            span.addClass("success");
                            span.text("√简介名称可用!");
                            span.show();
                        } else {
                            span.addClass("error");
                            span.text("×简介名称已经存在了!");
                            span.show();
                        }
                        //如果全部符合条件，则提交表单
                        if(flag && flag1){
                            $("form:first").submit();
                            //$("#fom").submit();
                        }
                    });
            }
        );



        // 绑定onblur事件
        function initOnblur() {
            // 验证key
            key.blur(function () {
                // 初始化flag1
                flag1 = false;
                // 获取span标签
                var span = $("#keyError");
                key.focus(function () {
                    span.hide();
                });
                // 获取文本输入框中的值
                var value = $("#key").val();
                // 创建正则表达式对象
                var reg = /^[\s\S]{1,100}$/;
                if (!reg.test(value)) {
                    span.html("*不能为空，长度100");
                    span.addClass("error");
                    span.show();
                    return;
                }
                $.post("${path}/backstage/intro/checkKey",
                    {"key": value,"exclude":'${intro.key}'}, function (result) {
                        //判断响应结果
                        if (result == "true") {
                            flag1 = true;
                            span.removeClass("error");
                            span.addClass("success");
                            span.text("√简介名称可用!");
                            span.show();
                        } else {
                            span.addClass("error");
                            span.text("×简介名称已存在!");
                            span.show();
                        }
                    }
                );
            });
            // key end...
            // 验证简介内容
            checkData(introValue, "*不能为空", /^[\s\S]{1,100}$/);
        }
        // 定义一个函数,用来检测数据
        // obj代表各个需要验证的输入框
        // info代表span错误时需要显示的内容.
        // fun - 闭包函数
        function checkData(obj, info, reg) {
            var span = obj.parent().next().children(0);
            // 各个文本输入框添加onfocus事件
            obj.focus(function () {
                span.hide();
            });
            // 添加需要验证的文本输入框的onblur事件
            obj.blur(function () {// 为了修改span样式
                // 先获取文本输入框中的内容
                var text = obj.val();
                // 每个验证的regex是不一样的.
                if (reg.test(text)) {
                    // 成功...
                    span.hide();
                } else {
                    // 不成功..
                    flag = false;
                    // 显示错误提示
                    span.removeClass("success");
                    span.addClass("error");
                    span.html(info);
                    span.show();
                }
            });
        }
        // 给表单中的元素绑定onfocus和onblur事件
        initOnblur();
    });
</script>
</body>
</html>
